<template>
	<view class="register-container">

		<view class="register-title">
			<u--text text="用户注册" align="center"></u--text>
		</view>
		<view>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
				<u-col span="10">
					<u-upload class="photo-tx"></u-upload>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>

		</view>
		<view class="register-form">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="formRegister"
						:errorType="errorType">
						<u-form-item prop="username" borderBottom ref="username" labelWidth="70">
							<u--input v-model="userInfo.username" border="none"
							prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入用户名" ></u--input>
						</u-form-item>
						<u-form-item prop="password" borderBottom ref="password">
							<u--input v-model="userInfo.password" border="none" :password='Showpsw' @change="pwdChange"  clearable
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入密码"
							>
							<template slot="suffix" class="icon-container">
									
									<u-icon v-if="Showpsw===true" name="eye-off" @click="pwdToogle"></u-icon>	
									<u-icon v-if="Showpsw===false" name="eye-fill" @click="pwdToogle"></u-icon>
									<u-icon v-if="pwdClose" name="close-circle-fill" size="12" @click="clearPwd"></u-icon>
							</template>
							</u--input>
						</u-form-item>
						<u-form-item prop="repassword" borderBottom ref="repassword" labelWidth="70">
							<u--input v-model="userInfo.repassword" border="none" :password='ShowRepsw' @change="RepwdChange" :clearable='true'
							prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="请再次输入密码"
							>
							<template slot="suffix">
									<u-icon v-if="ShowRepsw===true" name="eye-off" @click="RepwdToogle"></u-icon>	
									<u-icon v-if="ShowRepsw===false" name="eye-fill" @click="RepwdToogle"></u-icon>
									<u-icon v-if="RepwdClose" name="close-circle-fill" size="12" @click="clearRePwd"></u-icon>
							</template>
							</u--input>
						</u-form-item>
						<u-form-item prop="phonenumber" borderBottom ref="phonenumber" labelWidth="70">
							<u--input v-model="userInfo.phonenumber" border="none" :clearable='true'
							prefixIcon="phone-fill" prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入手机号"
							></u--input>
						</u-form-item>

						<!-- 获取验证码开始 -->

						<!-- <u-code-input v-model="value2" :maxlength="4" mode="line"></u-code-input> -->


						<!-- <view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
								</u-code>
								<u-button @tap="getCode">{{tips}}</u-button>
							</view> -->
						<!-- 获取验证码结束 -->
						<view class="xieyi">
							<u-radio-group>
								<u-radio activeColor="" label="我已阅读并同意《软件许可及服务协议》"></u-radio>
							</u-radio-group>
						</view>

						<u-button type="primary" text="注册" @click="register"></u-button>
					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>

			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u--text text="已有账号 直接登录" align="right" @click="toLogin"></u--text>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			  <view>
			    <u-notice-bar :text="text1" mode="closable"></u-notice-bar>
			  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pwdClose:false,
				RepwdClose:false,
				Showpsw: true,
				ShowRepsw:true,
				 text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				errorType: 'border-bottom',
				tips: '',
				// refCode: null,
				seconds: 10,
				userInfo: {
					username: '',
					password: '',
					repassword: '',
					phonenumber: '',
					userintro: ''
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'password': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						}
					],
					'repassword': [{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
							
								return  this.userInfo.password===value;
							},
							message: '两次输入的密码要一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'phonenumber': {
						type: 'number',
						required: true,
						len: 11,
						message: '手机号码格式不正确',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'userintro': {
						type: 'number',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
				},
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			clearRePwd(){
				this.userInfo.repassword=''
			},
			RepwdChange(){
				if(this.userInfo.repassword!=''){
					this.RepwdClose=true
				}else{
					this.RepwdClose=false
				}
			},
			RepwdToogle(){
				this.ShowRepsw=!this.ShowRepsw
			},
			clearPwd(){
				this.userInfo.password =''
			},
			pwdChange(){
				if(this.userInfo.password !=''){
					this.pwdClose=true
				}else{
					this.pwdClose=false
				}
			},
			pwdToogle(){
				this.Showpsw =! this.Showpsw
			},
			toLogin() {
				console.log("toLogin")
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			register() {
				this.$refs.formRegister.validate().then(res => {
					uni.request({
						url: 'https://www.gzzyue.com/prod-api/register', //注册真实接口地址。
						data: this.userInfo,
						method: 'POST',
						success: (res) => {
							console.log('res:', res);
							if (res.statusCode == 200) {
								if (res.data.code == 200) {
									uni.$u.toast(res.data.msg)
									uni.reLaunch({
										//	url: uni.getStorageSync("targeUrl")   //跳转到目标页
										url: '/pages/login/login' //跳转到登录页
									})
								} else if (res.data.code == 500) {
									uni.$u.toast(res.data.msg)
								} else {
									uni.$u.toast('系统服务异常，请联系管理员！')
								}
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						},
						fail: (errors) => {
							console.log('errors:', errors);
							uni.$u.toast('服务器错误，请联系管理员！')
						},
					});
					// uni.$u.toast('校验通过')

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})


			},


			// 获取验证码开始
			// codeChange(text) {
			// 	this.tips = text;
			// },
			// getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		uni.showLoading({
			// 			title: '正在获取验证码'
			// 		})
			// 		setTimeout(() => {
			// 			uni.hideLoading();
			// 			// 这里此提示会被this.start()方法中的提示覆盖
			// 			uni.$u.toast('验证码已发送');
			// 			// 通知验证码组件内部开始倒计时
			// 			this.$refs.uCode.start();
			// 		}, 2000);
			// 	} else {
			// 		uni.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			// end() {
			// 	uni.$u.toast('倒计时结束');
			// },
			// start() {
			// 	uni.$u.toast('倒计时开始');
			// },
			// 获取验证码结束
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		.register-title {
			margin: 50rpx;

		}

		.photo-tx {
			margin: 0 auto;
		}

		.register-form {
			margin-top: 50rpx;
			/deep/.u-input__content__subfix-icon{
				display: flex;
				flex-direction: row;
			}
			.wrap {

				// padding: 24rpx;
				button {
					color: white;
					border-radius: 16rpx;
					background-color: green;
					width: 120px;
					position: relative;
					top: -60rpx;
					right: -210rpx;
				}
			}

			.xieyi {
				margin-top: 15rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>
